<template>
	<view class="w-32bf mb-2 player-card flex-shrink rounded-lg"
		@tap="navTo(`/pages/playerhome/playerhome?id=${item.id}`)">
		<view class="flex position-relative">
			<image class="rounded-lg flex" :src="item.heading" mode="aspectFill" style="width: 100%;height: 218rpx;">
			</image>
			<view :class="item.gender === 2?'bgFF4CBE':'bg4258FF'"
				class="flex align-center rounded-circle  text-white fs-20 position-absolute top-0 left-0 mt-1 ml-1 px-1 h-28">
				<image :src="`/static/imgs/${item.gender === 2?'sex':'sex1'}.png`" mode="aspectFill"
					style="width: 20rpx;height: 20rpx;"></image>
				<text class="ml-1">{{item.age}}</text>
			</view>
			<!-- <image class="position-absolute top-0 right-0 mt-1 mr-1" src="/static/imgs/new_icon.png" mode="aspectFill"
				style="width: 59rpx;height: 25rpx;"></image> -->
		</view>
		<view class="flex align-center mt-2">
			<view class="flex align-center px-1 py-1 rounded fs-20 mr-1" v-for="(obj,index) in item.interests" :key="index"
				:style="{'background':obj.icon_bg_color||'#D5EDF8'}">
				<image :src="obj.icon" mode="aspectFill" class="w-28 h-28 rounded-circle mr-1"></image>
				<text>{{obj.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.player-card {
		height: 300rpx;
	}
</style>